<div *ngIf="!loading" style="text-align: center">
    <clr-spinner></clr-spinner>
</div>
<div *ngIf="loading">
    <form clrForm #F5config="ngForm" >
            <clr-input-container>
                <label>{{'APP_F5_URL'|translate}}</label>
                <input clrInput placeholder="https://172.16.10.100" name="url" size="25" [(ngModel)]="item.url" required/>
            </clr-input-container>
            <clr-input-container>
                <label>{{'APP_F5_USER'|translate}}</label>
                <input clrInput placeholder="admin" name="user" size="25"  [(ngModel)]="item.user" required/>
            </clr-input-container>
            <clr-input-container>
                <label>{{'APP_F5_PASSWORD'|translate}}</label>
                <input clrInput  type="password" placeholder="Password" name="password" size="25"  [(ngModel)]="item.password" required/>
                <clr-control-error>{{'APP_F5_PASSWORD_ERROR_MSG'|translate}}</clr-control-error>
            </clr-input-container>
            <clr-input-container>
                <label>{{'APP_F5_PARTITION'|translate}}</label>
                <input clrInput placeholder="Partition Name" name="partition" size="25"  [(ngModel)]="item.partition" required/>
            </clr-input-container>
            <clr-input-container>
                <label>{{'APP_F5_PUBLIC_IP'|translate}}</label>
                <input clrInput placeholder="" name="public_ip" size="25"  [(ngModel)]="item.publicIP" />
            </clr-input-container>
    </form>
    <button *ngIf="item.id != ''" class="btn btn-info-outline" (click)="onUpdate()" [disabled]="F5config.invalid">
        {{'APP_COMMIT'|translate}}
    </button>
    <button *ngIf="item.id == ''" class="btn btn-info-outline" (click)="onSubmit()"  [disabled]="F5config.invalid">
        {{'APP_COMMIT'|translate}}
    </button>
</div>
